<template>
  <div class="road-detail">
    <div class="road-detail-top">
      <b-tabs v-model="activeTab" :items="tabs" class="road-detail-tabs"></b-tabs>
    </div>

    <div class="road-detail-content">
      <road-info v-if="activeTab === '1'" :params="params" />
      <road-sensor v-else-if="activeTab === '2'" :params="params" />
      <road-video v-else-if="activeTab === '3'" :params="params" />
      <road-person v-else-if="activeTab === '4'" :params="params" />
    </div>
  </div>
</template>
<script setup lang="ts">
import BTabs from '@/components/b-tabs.vue'
import { ref, onMounted } from 'vue'
import RoadInfo from './roadInfo.vue'
import RoadSensor from './roadSensor.vue'
import RoadVideo from './roadVideo.vue'
import RoadPerson from './roadPerson.vue'

const props = defineProps({
  params: {
    type: Object
  }
})

onMounted(() => {
  activeTab.value = props.params.active
  // 如果是采面，则只显示传感器\视频\人员
  if (props.params.type === '2') {
    tabs.value.shift()
    if (props.params.active === '1') {
      activeTab.value = '2'
    }
  }
})

const tabs = ref([
  { id: '1', label: '区域信息' },
  { id: '2', label: `传感器（${props.params.sensorCount || '0'}）` },
  { id: '3', label: `视频（${props.params.cameraCount || '0'}）` },
  { id: '4', label: `人员（${props.params.peopleCount || '0'}）` }
])

const activeTab = ref('1')
</script>
<style scoped lang="scss">
.road-detail {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: calc(16px * var(--scale));
  .road-detail-content {
    flex: 1;
    overflow: auto;
  }
}
</style>
